<template>
    <div id="app">
        <h2>我是通过vite搭建的vue2项目</h2>
        <div v-for="item in arr" :key="item">{{ item }}</div>
        <button @click="changeArr">click me</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            arr: [1, 2, 3]
        }
    },
    methods: {
        changeArr() {
            // 1. 利用数组下标 设置值的时候
            // this.arr[1] = 666
            this.$set(this.arr, 1, 777)
            // 2. 修改arr.length 数组长度的时候
            // this.arr.length = 2
            this.arr.push(9999)
        }
    },

    created() {
        // vue2 针对数组
        // 解决 =>
        // 1. 组件内：vm.$set(vm.arr, 下标，newVal)
        // 2. 数组的7个方法，是响应式, 通过这7个方法修改数组，是响应式
        // （vue底层，针对数组，改写了数组的原型 Array.prototype => 重写了这7个方法）
        // push / pop / shift / unshift / splice / sort / reverse
        // Vue2的缺陷
        // 1. 针对对象 ， 属性的新增和删除，不是响应式
        // 2. 针对数组 ，  ==> Vue底层重写了数组的原型 7个方法
        //     2.1 通过数组下标修改值，不是响应式
        //     2.3 修改数组的length，不是响应式
    }
}
</script>

<style lang="less"></style>
